import React from 'react';
import { useState, useRef } from 'react';
import Son from './Son'
type Props = {}
type userType = {
    name: string,
    age: number
}
export default function Father(props: Props) {
    // 函数式写法,会进行隐式的类型推断 num为number
    const [num, setNum] = useState<string | number>(0);
    const [userobj, setuserobj] = useState<userType>({ name: '张三', age: 20 })

    const ref1 = useRef<HTMLInputElement>(null);

    const edituserFn = () => {
        setuserobj({
            ...userobj,
            age: userobj.age + 1
        })
    }
    return (
        <div>
            <p onClick={() => {
                setNum('100')
            }}>num:{num}</p>
            {/* 受控组件 */}
            {/* <input type='text' value={userobj.name} onChange={(e) => {
                setuserobj({
                    ...userobj,
                    name: e.target.value
                })
            }} /> */}

            {/* 非受控组件 */}
            <p>
                <input type='text' defaultValue={userobj.name} ref={ref1} />
                <button onClick={() => {
                    console.log(ref1.current?.value)

                    console.log((ref1.current as HTMLInputElement).value)
                }}>点击提交</button>
            </p>

            {/* 使用子组件 */}
            <Son userObj={userobj} edituser={edituserFn}></Son>
        </div>
    )
}